<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link active">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link mobile-active">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/vue/5-Vue%E8%BF%9B%E9%98%B6/">python/vue/5-Vue进阶</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          1 slot插槽 (内容分发)1234a. 单个slot b. 具名slot	*混合父组件的内容与子组件自己的模板--&gt;内容分发	*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

1.1 基本使用12345678910111213141516171819 ...
        
      </div>
      <a class="more" href="/python/vue/5-Vue%E8%BF%9B%E9%98%B6/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/vue/6-Vue-cli/">vue/6-Vue-cli</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          Vue-CLI 项目搭建1 单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad

2 Vue-CLI 项目搭建2.1 环境搭建1234567891011121314151617- 安装node官网下载安装包，傻 ...
        
      </div>
      <a class="more" href="/vue/6-Vue-cli/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/vue/3-Vue%E7%94%9F%E5%91%BD%E6%9C%9F%E9%92%A9%E5%AD%90/">vue/3-Vue生命期钩子</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          Vue声明期钩子



表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数钩子函数: 满足特点条件被回调的方法
8个生命周期函数
123456789101112131415161718192021222324252627282930313233343536 ...
        
      </div>
      <a class="more" href="/vue/3-Vue%E7%94%9F%E5%91%BD%E6%9C%9F%E9%92%A9%E5%AD%90/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/vue/5-Vue%E8%BF%9B%E9%98%B6/">vue/5-Vue进阶</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          1 slot插槽 (内容分发)1234a. 单个slot b. 具名slot	*混合父组件的内容与子组件自己的模板--&gt;内容分发	*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

1.1 基本使用12345678910111213141516171819 ...
        
      </div>
      <a class="more" href="/vue/5-Vue%E8%BF%9B%E9%98%B6/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/vue/7-Vue%E6%8F%92%E4%BB%B6/">python/vue/7-Vue插件</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          项目功能插件1、vue-router123456789101112131415161718192021222324&#123;    path: '/',    name: 'home',    // 路由的重定向    redirect: '/home'&#125;&#123;    // ...
        
      </div>
      <a class="more" href="/python/vue/7-Vue%E6%8F%92%E4%BB%B6/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/vue/6-Vue-cli/">python/vue/6-Vue-cli</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          Vue-CLI 项目搭建1 单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html#ad

2 Vue-CLI 项目搭建2.1 环境搭建1234567891011121314151617- 安装node官网下载安装包，傻 ...
        
      </div>
      <a class="more" href="/python/vue/6-Vue-cli/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/vue/1-Vue%E4%BB%8B%E7%BB%8D/">python/vue/1-Vue介绍</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          Vue入门零：前端目前形势前端的发展史1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -&gt; 给后端(PHP、Python、Go、Java) -&gt; 后端嵌入模板语法 -&gt; 后端渲染完数据 -&gt; 返回数据给前端 -&gt; 在浏 ...
        
      </div>
      <a class="more" href="/python/vue/1-Vue%E4%BB%8B%E7%BB%8D/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/vue/8-Vue%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6%E4%B9%8BElementUi/">vue/8-Vue第三方框架之ElementUi</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          热门组件库1 使用第三方插件https://github.com/vuejs/awesome-vue#components--libraries
集合了来自社区贡献的数以千计的插件和库。
2 使用第三方UI框架饿了么UED团队推出的vue 前端框架：
PC框架：(element UI ， i ...
        
      </div>
      <a class="more" href="/vue/8-Vue%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6%E4%B9%8BElementUi/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/vue/7-Vue%E6%8F%92%E4%BB%B6/">vue/7-Vue插件</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          项目功能插件1、vue-router123456789101112131415161718192021222324&#123;    path: '/',    name: 'home',    // 路由的重定向    redirect: '/home'&#125;&#123;    // ...
        
      </div>
      <a class="more" href="/vue/7-Vue%E6%8F%92%E4%BB%B6/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/vue/3-Vue%E7%94%9F%E5%91%BD%E6%9C%9F%E9%92%A9%E5%AD%90/">python/vue/3-Vue生命期钩子</a>
      </h2>
      <p class="article-date">2020年12月13日</p>
      
      <div class="article-summary">
        
          一：生命周期图1.官网原图
3.我理解的图
二：生命周期


钩子函数
描述



beforeCreate
创建Vue实例之前调用


created
创建Vue实例成功后调用（可以在此处发送异步请求后端数据）


beforeMount
渲染DOM之前调用


mounted
渲染DOM ...
        
      </div>
      <a class="more" href="/python/vue/3-Vue%E7%94%9F%E5%91%BD%E6%9C%9F%E9%92%A9%E5%AD%90/">详情...</a>
    </article>
  

  
    <div class="guide-pager">
  
    <a href="/page/7/"><span class="page-arrow">← </span>Prev</a>
  
  
    <a href="/page/9/">Next<span class="page-arrow"> →</span></a>
  
</div>
  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>